(function () {
	window.initAddMoneyPage = function (app, position, size) {
		var elements = {
			background: createRect(0, 0, size.width - 20, size.height - 20),
			title: createText(40, 40, 40, 'Тут добавлять монетки'),
			closeButton: createCloseButton(app, size),
			addMoneyButtons: createAddMoneyButtons(app)
		};
		var layer = new Kinetic.Layer();
		for (var i in elements) {
			layer.add(elements[i]);
		}
		var stage = new Kinetic.Stage({
			container: 'addMoneyPage',
            x: position.x,
            y: position.y,
            width: position.x + size.width,
            height: position.y + size.height
		});
		stage.add(layer);
		return stage;
	};

	function createCloseButton (app, size) {
		var button = createButton(size.width - 140, 20, 100, 40, 'Закрыть');
		button.on('click', function () {
			app.moveToBottom('addMoneyPage');
		});
		return button;
	}
	function createAddMoneyButtons (app) {
		var g = new Kinetic.Group();
		var addMoneyButtons = {
			add100Coins: createAddMoneyButton(app, 100, 0),
			add300Coins: createAddMoneyButton(app, 300, 1),
			add700Coins: createAddMoneyButton(app, 700, 2),
			add1500Coins: createAddMoneyButton(app, 1500, 3)
		};
		for (var i in addMoneyButtons) {
			g.add(addMoneyButtons[i]);
		}
		return g;
	}
	function createAddMoneyButton (app, count, index) {
		var button = createButton(30, 130 + index * 70, 600, 50, '+' + count + '$');
		return button;
	}

	function createButton (x, y, width, height, text) {
		var button = new Kinetic.Group();
		button.add(createRect(x, y, width, height));
		button.add(createText(x, y, 20, text));
		button.on('mouseover', function() {
			document.body.style.cursor = 'pointer';
		});
		button.on('mouseout', function() { document.body.style.cursor = 'default'; });
		return button;
	}
	function createRect (x, y, width, height) {
		return window.EngineWrapper.rect(x, y, width, height);
	}
	function createText (x, y, fontSize, text) {
		var el = new Kinetic.Text({
			x: x,
			y: y,
			text: text,
			fontSize: fontSize,
			fill: '#555',
			padding: 10,
			align: 'center'
		});
		return el;
	}
})();